<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Diamond</title>
    <link rel="shortcut icon" href="favicon.png">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=1.5">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
        .tipcenter {
            display: flex;
            justify-content: center;
        }
        .line-gutter {
            margin-bottom: 1em;
        }
        .oneline-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body>
    
    <div id="ssmell" v-cloak>
        <div class="tipcenter line-gutter">
            <span @click="hello">💕 这是两个臭臭的网站 💕</span>
        </div>
        <el-row type="flex" justify="center">
            <el-col :span="10">
                <el-card shadow="hover" >
                    <div slot="header" class="oneline-between" >
                        <span>OurRecord</span>
                        <el-button @click="gotoourrecord" size="mini" type='primary' circle icon="el-icon-tickets"></el-button>
                    </div>
                    <div >
                        ✒这是过去，也是未来。
                    </div>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <!-- <el-col :span="10">
                <el-card shadow="hover">
                    <div slot="header" class="oneline-between">
                        <span>快乐星球</span>
                        <el-button @click="gotointegral" size="mini" type='primary' circle icon="el-icon-magic-stick"></el-button>
                    </div>
                    <div>
                        让彼此变得更好。
                    </div>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col> -->
            <el-col :span="10">
                <el-card shadow="hover">
                    <div slot="header" class="oneline-between">
                        <span>gitxdb</span>
                        <el-button @click="gotoaddrecord" size="mini" type='primary' circle icon="el-icon-edit-outline"></el-button>
                    </div>
                    <div>
                        以 Issue 作为简单数据库存储个人数👈
                    </div>
                </el-card>
            </el-col>
            
        </el-row>
        <!-- <el-row type="flex" justify="center">
            <el-col :span="10">
                <el-card shadow="hover">
                    <div slot="header" class="oneline-between">
                        <span>gitxdb</span>
                        <el-button @click="gotoaddrecord" size="mini" type='primary' circle icon="el-icon-edit-outline"></el-button>
                    </div>
                    <div>
                        以 Issue 作为简单数据库存储个人数👈
                    </div>
                </el-card>
            </el-col>
        </el-row> -->
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: "#ssmell",
            data: {
                name: "Me",
                startDate: new Date('2018-09-30 21:27:07'),
            },
            computed: {
                gothrough: function() {
                    let gutter = (new Date().getTime() - this.startDate.getTime())/(24*60*60*1000)
                    return Math.floor(gutter)
                }
            },
            methods: {
                hello: function () {
                    this.$message({
                        message: ` 我们一起走过了 ${this.gothrough} 天, update at 21/8/20 11:37`,
                        iconClass: 'el-icon-sunny',
                        center: true,
                    })
                },
                gotoourrecord: function() {
                    window.location.href = './ourrecord/dist/index.html?date='+new Date().getTime();
                },
                gotoaddrecord: function() {
                    window.location.href = './gitxdb/index.html';
                },
                gotointegral: function() {
                    window.location.href = './ourintegral/dist/index.html?date='+new Date().getTime()
                }
            }
        })
    </script>
</body>

</html>